<template>
  <div class="video-wrap">
    <video
      class="video-wrap__video"
      poster="https://qq-web.cdn-go.cn/monorepo/3ccce5a6/zc.qq.com_v3/assets/img/img-bg@2x.png"
      src="https://qq-web.cdn-go.cn/monorepo/3ccce5a6/zc.qq.com_v3/assets/img/bg-video.mp4"
      tabindex="-1"
      airplay="allow"
      x-webkit-airplay="true"
      playsinline="true"
      webkit-playsinline="true"
      x5-playsinline="true"
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      autoplay
      muted
    ></video>
  </div>
  <div class="main-wraper">
    <div class="main">
      <div class="form" autocomplete="off">
        <div>
          <div class="welcome">欢迎注册康康邮箱</div>
          <div class="register-header">每一天，乐在沟通。</div>
        </div>
        <form
          class="input-warp"
          autocomplete="off"
          @submit.prevent="handleRegister"
        >
          <!-- 手机号 -->
          <div class="input-wrap__item input-area">
            <div class="input-flags">
              <div class="input-ok" style="display: none"></div>
            </div>
            <label class="input-placeholder" id="nickname-tips" for="nickname"
              >手机号:</label
            >
            <div class="input-outer">
              <input
                v-model="phoneNumber"
                autocomplete="off"
                type="text"
                id="nickname"
                class="nickname error"
                maxlength="11"
                tabindex="3"
              />
            </div>

            <div class="error-tips-wrap">
              <div class="error-tips"></div>
            </div>
          </div>
          <!-- 密码 -->
          <div class="input-wrap__item input-area input-wrap__item-password">
            <label class="input-placeholder" id="password-tips" for="password"
              >密码:</label
            >
            <div class="input-flags"></div>
            <div class="input-outer">
              <div class="password-raw" style="display: none"></div>
              <input
                v-model="password"
                autocomplete="off"
                type="password"
                id="password"
                class="password"
                maxlength="16"
                tabindex="4"
              />
            </div>
            <div class="password-tips-group slideup">
              <div class="password-tips">长度为 8 - 16 个字符</div>
              <div class="password-tips">
                必须包含字母、数字、符号中至少 2 种
              </div>
            </div>
            <div class="error-tips-wrap">
              <div class="error-tips"></div>
            </div>
          </div>

          <!-- 昵称 -->
          <div class="input-wrap__item input-area">
            <div class="input-flags">
              <div class="input-ok" style="display: none"></div>
            </div>
            <label class="input-placeholder" id="user_nick-tips" for="user_nick"
              >昵称:</label
            >
            <div class="input-outer">
              <input
                v-model="user_nick"
                autocomplete="off"
                type="text"
                id="user_nick"
                class="user_nick"
                maxlength="11"
                tabindex="4"
              />
            </div>
            <div class="error-tips-wrap">
              <div class="error-tips"></div>
            </div>
          </div>

          <!-- 注册按钮 -->
          <div>
            <input
              id="get_acc"
              type="submit"
              class="btn-submit"
              value="立即注册"
              tabindex="8"
            />
            <div class="error-tips-wrap slideup">
              <div class="error-tips"></div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import axios from "axios";

export default defineComponent({
  setup() {
    const phoneNumber = ref("");
    const password = ref("");
    const user_nick = ref("");
    const handleRegister = async () => {
      try {
        const requestData = {
          phone_number: phoneNumber.value,
          password: password.value,
          user_nick: user_nick.value,
        };

        const response = await axios.post(
          "http://localhost:3000/api/register",
          requestData
        );

        if (response.data.success) {
          // 注册成功，可进行页面跳转或提示用户
          alert("注册成功，请登录");
        } else {
          // 注册失败，显示错误信息
          alert(response.data.message);
        }
      } catch (error) {
        console.error("注册请求出错:", error);
        alert("注册请求出错，请稍后重试");
      }
    };

    return {
      phoneNumber,
      password,
      user_nick,
      handleRegister,
    };
  },
});
</script>

<style scoped>
:global(:root) {
  --brand-standard: #0085ff;
  --text-primary: #000;
  --text-primary-light: #666;
  --text-secondary-01: #999;
  --text-secondary-02: #ccc;
  --text-white: #fff;
  --text-link: #2e77e5;
  --text-navigation-01: #000;
  --text-navigation-02: #000;
  --text-error: #ff5765;
  --icon-primary: #000;
  --icon-secondary-01: #999;
  --icon-secondary-02: #ccc;
  --icon-white: #fff;
  --icon-navigation-01: #000;
  --icon-navigation-02: #000;
  --feedback-success: #15d173;
  --feedback-warning: #ffb300;
  --feedback-error: #ff5965;
  --background-black: #000;
  --background-gray: #f5f5f5;
  --background-white: #fff;
  --background-dialogue: #fff;
  --background-dialogue-pressed: #e6e6e6;
  --background-list: #fff;
  --background-list-pressed: #e6e6e6;
  --background-stick: #f5f5f5;
  --background-chat-bg: #f1f1f1;
  --divider-standard: #e6e6e6;
  --divider-light: #f5f5f5;
  --bubble-host: var(--brand-standard);
  --bubble-guest: #fff;
  --bubble-host-text: #fff;
  --bubble-guest-text: #000;
}

body {
  display: block;
  opacity: 1;
}

.video-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #c0e4f3;
}

* {
  margin: 0;
  padding: 0;
  border: none;
  transition: all 0.2s;
}

.video-wrap__video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

body .main-wraper {
  position: relative;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

body .main {
  -ms-flex: 1;
  flex: 1;
  margin: 220px auto 0 auto;
}

body .main > .form {
  position: relative;
  margin: 0 auto;
  width: 320px;
}

body .main > .form .welcome {
  font-size: 38px;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
}

body .main > .form .register-header {
  font-size: 18px;
  margin-bottom: 32px;
  line-height: 1.3;
  color: var(--text-primary);
}

body .main > .form form .input-area {
  position: relative;
}
.input-wrap__item {
  margin-top: 16px;
}

body .main > .form form .input-area .input-flags {
  position: absolute;
  right: 0;
  height: 52px;
  z-index: 1;
}

body .main > .form form .input-area .input-flags .input-ok {
  display: none;
  width: 16px;
  height: 16px;
  display: block;
  float: right;
  margin: 12px;
  background-position: 50% 50%;
  background-image: url(../img/icon-tick@3x.png);
  background-size: cover;
}

body .main > .form form .input-area .input-placeholder {
  position: absolute;
  top: 0;
  left: -57px;
  z-index: 8;
  font-size: 14px;
  line-height: 1.3;
  padding: 8px;
  background-color: transparent;
  color: var(--text-secondary-01);
}

body .main > .form form .input-area .input-outer {
  background: 0 0;
}

body .main > .form form .input-area .input-outer .qqmail,
body .main > .form form .input-area .input-outer input {
  padding: 8px;
  width: 320px;
  line-height: 1.3;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-sizing: border-box;
}

body .main > .form form .error-tips-wrap {
  padding-top: 8px;
  height: 18px;
  position: relative;
  line-height: 1;
}

body .main > .form form .error-tips-wrap .error-tips {
  position: relative;
  z-index: 1;
  padding-left: 22px;
  font-size: 12px;
  color: var(--text-error);
  line-height: 1.5;
}

body .main > .form form .input-area {
  position: relative;
}
.input-wrap__item {
  margin-top: 16px;
}

body .main > .form form .password-tips-group {
  padding-top: 4px;
  line-height: 1;
  overflow: hidden;
}

.slideup {
  opacity: 0;
  height: 0 !important;
}

body .main > .form form .password-tips-group .password-tips {
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-primary-light);
}

body .main > .form form .password-tips-group .password-tips::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 16px;
  height: 16px;
  background-position: 50% 50%;
  background-size: cover;
}

body .main > .form form .error-tips-wrap {
  padding-top: 8px;
  height: 18px;
  position: relative;
  line-height: 1;
}

body .main > .form form .error-tips-wrap {
  padding-top: 8px;
  height: 18px;
  position: relative;
  line-height: 1;
}

body .main > .form form .error-tips-wrap .error-tips {
  position: relative;
  z-index: 1;
  padding-left: 22px;
  font-size: 12px;
  color: var(--text-error);
  line-height: 1.5;
}

.input-wrap__item {
  margin-top: 16px;
}
.mobilephone-wrap {
  position: relative;
  z-index: 10;
}

.mobilephone-wrap__inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  align-items: center;
  padding: 8px;
  width: 320px;
  line-height: 1.3;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-sizing: border-box;
}

.mobilephone-wrap__bd {
  -ms-flex: 1;
  flex: 1;
}

.mobilephone-wrap__text-input {
  width: 100%;
  line-height: 1.3;
  font-size: 14px;
  background-color: transparent;
}

body .main > .form form .error-tips-wrap .error-tips {
  position: relative;
  z-index: 1;
  padding-left: 22px;
  font-size: 12px;
  color: var(--text-error);
  line-height: 1.5;
}

.btn-submit {
  display: block;
  margin-top: 32px;
  padding: 11px 0;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  color: var(--text-white);
  background-color: var(--brand-standard);
  border-radius: 4px;
}

body .main > .form form .error-tips-wrap {
  padding-top: 8px;
  height: 18px;
  position: relative;
  line-height: 1;
}

body .main > .form form .error-tips-wrap .error-tips {
  position: relative;
  z-index: 1;
  padding-left: 22px;
  font-size: 12px;
  color: var(--text-error);
  line-height: 1.5;
}

body .main > .form form .error-tips-wrap {
  padding-top: 8px;
  height: 18px;
  position: relative;
  line-height: 1;
}
</style>
